<template>
  <div>
      <input type="checkbox" :checked="doneCount === totalCount && totalCount !== 0" @change="changeObjAll"/>
      <span>已完成 {{doneCount}}/{{totalCount}}</span>
      <button @click="clearDoneObj">清除已完成任务</button>
    </div>
</template>

<script>
export default {
    name: 'MyFooter',
    props:['todos',"clearDoneTask"],
    computed: {
        doneCount() {
            return this.todos.reduce((pre, todo) => pre + (todo.done ? 1 : 0), 0);
        },
        totalCount() {
            return this.todos.length;
        }
    },
    methods:{
        clearDoneObj(){
          this.clearDoneTask()
        },
        changeObjAll(e){
          const done = e.target.checked
          this.$emit('changeTaskDoneAll', done)
        }
    }
}
</script>

<style>

</style>